<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>私聊</title>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.min.js"></script>
		<script src="../js/elementui.js"></script>
		<script src="../layui/layui.js"></script>
		<script src="../js/jquery3.5.1.js"></script>
		<link href="../layui/css/layui.css" rel="stylesheet">
		<link href="../css/gun.css" rel="stylesheet">
		<link rel="stylesheet" href="../css/index.css" />
		<link rel="stylesheet" href="../css/chat.css" />
	</head>
	<body>
		<div id="app">
			<div id="box">
				<div id="lfte">
					<div class="chatli">近期消息</div>
					<!--消息列表-->
					<div class="msg" id="doubi">
						<img class="tou" src="../img/logo(1).png"/ width="60px" height="60px">
						<div class="touname"><span>逗比小电视</span><br />
						<span class="chatmsg">你的逗比小助手为你服务</span>
						</div>
					</div>
					<div class="msg" id="youFriend">
						<img class="tou" src="../img/userimg1.png" width="60px" height="60px">
						<div class="touname"><span>你的好友</span><br />
						<span class="chatmsg">你怎么能这样对我你对的起…</span>
						</div>
					</div>
					<div class="msg" style="background: #454655;" id="tutuzi">
						<img class="tou" src="../img/userimg2.png" width="60px" height="60px">
						<div class="touname"><span>兔兔子</span><br />
						<span class="chatmsg">我是你的粉丝</span>
						</div>
					</div>
					<div class="msg" id="mimi">
						<img class="tou" src="../img/userimg3.png" width="60px" height="60px">
						<div class="touname"><span>喵喵喵</span><br />
						<span class="chatmsg">互关吗?</span>
						</div>
					</div>
				</div>
				<div id="main">
					<!--表情盒子-->
					<div id="emote" v-show="show">
						<div class="emotile"><strong>表情</strong></div>
						<template v-for="obj in soya">
							<div class="soya" style="font-size: 30px;"><a class="aemote" href="#">{{obj}}</a></div>
						</template>
					</div>
					<div class="chatname">兔兔子 <span class="san" id="san">...</span></div>
					<div id="chat">
						<!--聊天内容-->
						<!--消息提示-->
						<div class="tips">你们已经成为好友，开始聊天吧！</div>
						<div class="leftuser">
							<!--头像-->
							<img class="lefttou" src="../img/userimg2.png" width="50px" height="50px"/>
							<!--消息-->
							<div class="chatCont">😄你终于加我了！❤❤</div>
						</div>
						<div class="tips">2024-12-31 00:00:00</div>
						<div class="rightuser">
							<!--消息-->
							<div class="rightuserchatCont">?</div>
							<!--头像-->
							<img class="rightusertou" src="../img/默认头像.png" width="50px" height="50px"/>
						</div>
						<div class="leftuser">
							<!--头像-->
							<img class="lefttou" src="../img/userimg2.png" width="50px" height="50px"/>
							<!--消息-->
							<div class="chatCont">我是你的粉丝</div>
						</div>
					</div>
					<div id="sand">
						<div class="emj">
							<div class="iimg"><i id="fileimg" class="layui-icon" style="font-size: 33px; color: #d0d0d0;">&#xe64a;</i>  </div>
							<div class="iimg"><i @click="showe" class="layui-icon" style="font-size: 33px; color: #d0d0d0;">&#xe650;</i>  </div>
						</div>
						<textarea id="text" maxlength="250"></textarea>
						<div class="foot">
							<div class="footcont"><span><span id="num">0</span>/250</span>&nbsp;&nbsp;
							<el-button @click="send" id="sendbut" type="danger" size="medium" >发送</el-button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				show:false,
				soya:["😀","😄","🤣","😁","😂","😒","😎","😘","😊","🙄","😍","😉","😙","🤩","🤔","🤗","😴","😑","😭",
				"🥱","🥰","😶","😱","🥺","😞","💩","🤬","👻","🥶","🥵","😏","🤡","😇","🥳","👀","👌"],
			},methods:{
				showe(){
					if(this.show){
						this.show=false
					}else{
						this.show=true
					}
				},send(){
					this.show=false
					
				},
			}	
		})
	</script>
	<script type="text/javascript" src="../js/chat.js"></script>
</html>
